<template>
	<!-- ssfg  -->
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="bg-white padding">
			<view class="cu-steps padding-bottom-sm">
				<view class="cu-item" :class="step==0?'text-time':'text-yellow'">
					<text class="num" data-index="1"></text> 讲师资料
				</view>
				<view class="cu-item" :class="[(step>1?'text-yellow':(step==1?'text-time':'')),(refused?'refused':'')]">
					<text class="num" data-index="2"></text> 入驻审核
				</view>
				<view class="cu-item" :class="step==2?'text-yellow':''">
					<text class="num" data-index="3"></text> 认证成功
				</view>
			</view>
		</view>
		<view class="padding bg-white margin-top-sm" v-if="step==0">
			<view class="padding">
				<view class="avatar shadow" @click="ChooseCover">
					<view class="cu-avatar xl round shadow" :style="'background-image:url('+this.applyform.lecturerImg+');'" v-model="applyform.lecturerImg"></view>
					<view class="icon text-yellow"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view>
			<form>
				<view class="cu-form-group margin-top">
					<view class="title">讲师名称</view>
					<input placeholder="请输入您的讲师昵称" v-model="applyform.title" name="title" value="title" disabled="disabled"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">真实姓名</view>
					<input placeholder="请输入您的真实姓名" v-model="applyform.name" name="name" value="name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input placeholder="请输入您的联系电话" :focus="inputfocus=='mobile'?true:false" v-model="applyform.phone" name="phone" value="phone" disabled="disabled"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">验证码</view>
					<input placeholder="输入您收到的验证码" v-model="verifycode" name="verifycode"></input>
					<text class="text-yellow" @click="sendcode">{{verifycodetext}}</text>
				</view>
				<view class="cu-form-group">
					<view class="title">性别</view>
					<radio-group style="flex: 1;" @change="ChangeGender" name="sex" value="sex" >
						<label >
							<radio class='red radio' :class="applyform.sex==1?'checked':''" :checked="applyform.sex==1?true:false" value="1" disabled="disabled"></radio>
							<text class="padding-left-sm">男</text>
						</label>
						<label class="margin-left padding-left">
							<radio class='red radio' :class="applyform.sex==2?'checked':''" :checked="applyform.sex==2?true:false" value="2" disabled="disabled"></radio>
							<text class="padding-left-sm">女</text>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">QQ号</view>
					<input placeholder="请输入您的QQ号" v-model="applyform.QQnum" name="QQnum" value="QQnum" disabled="disabled"></input>
					<input placeholder=""  type="text" style="display:none" v-model="applyform.audit" name="audit" value="audit" disabled="disabled"></input>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">讲师简介</view>
					<textarea maxlength="-1" v-model="applyform.intro" placeholder="请简要介绍您的个人信息" name="intro" value="intro"></textarea>
				</view>
				<view class="margin-bottom-sm" v-if="lecturer.audit==2">
					<view class="text-center text-yellow padding-xs"><text>修改资料需要重新审核</text></view>
				</view>
				<view class="flex flex-direction">
					<button class="cu-btn round round bg-gradual-yellow lg text-boldm round-topleft-none" @click="dosubmit">提交申请</button>
				</view>
				<view class="padding-sm text-gray margin-top">
					<text>更多图文资料请发送邮件到</text>
					<text class="text-bold padding-left-xs">{{data.notices_mail}}</text>
				</view>
			</form>
		</view>
		<view class="padding bg-white margin-top-sm" v-if="step==1">
			<view class="padding text-center margin-top">
				<image class="waitting" :class="refused?'refused':''" src="@/static/images/img_lector_apply.png"></image>
			</view>
			<view class="text-center padding" v-if="refused">
				<view><text class="title text-bold text-xxl text-black">认证信息未通过</text></view>
				<view><text class="title text-bold text-xxl text-black">编辑资料重新提交</text></view>
				<view class="text-gray text-lg padding">{{applyinfo.approve}}</view>
			</view>
			<view class="text-center padding" v-else>
				<view><text class="title text-bold text-xxl text-black">认证申请已提交</text></view>
				<view class="text-gray text-lg padding">您的认证申请信息已提交，将在3个工作日内完成审核</view>
			</view>
			<view class="flex flex-direction padding-bottom">
				<button class="cu-btn round round-topleft-none bg-gradual-yellow lg shadow margin-bottom text-boldm" @click="doback">我知道了</button>
				<view class="text-center">
					<text class="text-lg text-yellow" @click="step=0">编辑资料</text>
				</view>
			</view>
		</view>
		<view class="padding bg-white margin-top-sm" v-if="step==2">
			<view class="padding-top text-center margin-top">
				<image class="completed" src="@/static/images/img_lector_completed.png"></image>
			</view>
			<view class="text-center padding">
				<view><text class="title text-bold text-xxl text-black">讲师认证通过</text></view>
				<view class="text-gray text-lg padding-top padding-bottom-xs">恭喜您！成功认证{{systemname}}讲师</view>
				<view class="text-gray text-lg padding-bottom">请进入讲师中心发布课程</view>
			</view>
			<view class="flex flex-direction padding-bottom">
				<button class="cu-btn round round-topleft-none bg-gradual-yellow lg shadow margin-bottom text-boldm" @click="naviTo('lector/console')">确定</button>
				<view class="text-center">
					<text class="text-lg text-yellow" @click="step=0">编辑资料</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	import store from '@/store/index.js'
	var codeInterval = null;
	var regmobile = /^(\+)?(86)?0?1\d{10}$/;
	
	export default {
		computed: mapState(['hasLogin','lectorid']),
		data() {
			return {
				step:0,
				refused:false,
				verifycodetext:'获取验证码',
				inputfocus:'',
				verifycode:'',
				applyform:{
					id:0,
					title:'',
					name:'',
					phone:'',
					sex:0,
					QQnum:'',
					intro:'',
					audit:0,
					lecturerImg:''
				},
				"upd":{},
				"lecturer":[],
				"usermessage":{},
				applyinfo:{
					id:0,
					cover:'',
					lector:'',
					realname:'',
					mobile:'',
					gender:1,
					qq:'',
					summary:'',
					status:0,
					approve:''
				},
				data:{
					title:"讲师申请",
					systemname:'云课堂',
					apply:{
						id:0
					},
					cover:"",
					notices_mail:"",
					
				},
			}
		},
		onLoad() {
			if(!this.hasLogin) return core.navito('auth/index',{act:'login'});
			this.data.avatar = core.system.defaultimg;
			this.systemname = this.data.systemname;
			var that = this;	
			if(that.lecturer.audit==2){
				return naviTo('lector/console')
			}
			that.inituserinfo();
		    this.initData();
			that.initlecture();
		},
		onPullDownRefresh(){
			var that = this;
			this.initData('lector/apply',{},function(res){
		
			});
			uni.stopPullDownRefresh();
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					// if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
					// 	return core.report(res);
					// }
					
							console.log(that.lecturer.name)
					if(that.lecturer.name!='' && that.lecturer.audit==0){
						that.step=1;
						that.refused=true
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}	
					if(that.lecturer.audit==1){
						
						that.refused=false;
					}
					console.log(that.lecturer.lecturerImg)
						that.data.title='讲师申请'
						that.applyform.name=that.lecturer.name;
						that.applyform.lecturerImg=that.lecturer.lecturerImg;
						that.applyform.intro=that.lecturer.intro;
				},data);
	
					that.usermessage=core.userinfo;
					console.log(that.usermessage)
					that.applyform.id=that.usermessage.id;
					that.applyform.title=that.usermessage.nickname;
					that.applyform.phone=that.usermessage.phone;
					that.applyform.sex=that.usermessage.gender;
					that.applyform.QQnum=that.usermessage.qq;
			},
			naviTo(page,data={},type=0){
				return core.navito(page,data,type);
			},
			ChangeGender(e){
				this.applyform.sex = e.detail.value;
			},
			ChooseCover(){
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePaths[0],function(res){
							console.log(res)
							that.data.cover = res.data;
							that.applyform.lecturerImg=res.data;
							that.applyform.cover = res.path;
							
						});
					}
				});
			},
			sendcode(){
				if(this.verifycodetext!='获取验证码') return false;
				var username = this.applyform.phone;
				if(username==''){
					this.inputfocus = 'mobile';
					return core.toast('请输入您的常用手机号');
				}
				var that = this;
				return core.get('util/code',function(res){
					if(res.type!='success') return core.report(res);
					core.toast(res.message,'','success');
					that.verifycodetext = '120s';
					var n = 120;
					codeInterval = setInterval(function(){
						if(n==0){
							clearInterval(codeInterval);
							that.verifycodetext = '获取验证码';
							return;
						}else{
							that.verifycodetext = n+'s';
						}
						n--
					},1e3);
				},{from:'verify',username:username});
			},
			dosubmit(){
				if(this.applyform.title=='') return core.toast('讲师名称不能为空');
				if(this.applyform.name=='') return core.toast('请填写您的真实姓名');
				if(this.applyform.phone=='') return core.toast('请填写您的常用手机号');
				if(this.verifycode=='') return core.toast('请输入您收到的验证码');
				if(this.applyform.lecturerImg=='') return core.toast('请上传讲师照片');
				if(this.applyform.QQnum=='') return core.toast('讲师QQ不能为空');
				if(this.applyform.intro=='') return core.toast('讲师简介不能为空');
				var that = this;
				// return core.post('lector/apply',function(res){
					// if(res.type!='success') return core.report(res);
					console.log(that.lecturer)
					if(that.lecturer.length==0){
						that.initinsert();
					}else{						
						 that.initupd();
					}
					that.step = 1;
					that.refused = false;
				// },{data:this.applyform,verifycode:this.verifycode},'json',true);
			},
			doback(){
				var that = this;
				return core.back();
				if(that.refused==false){
					return core.back();
				}else{
					that.step=0;
					that.refused=false;
					
				
					
				}
			},
			/**
			 * 讲师申请添加数据
			 */
			async initinsert(){
						var that = this;
						console.log(that.applyform)
						var a=(await this.$api.reqPost({
							url:"lecturerapply/insert/"+core.userinfo.uid,
							methods:"POST",
							data:that.applyform
						})).data;
						
						if(a>0){
							core.toast('申请成功','','success');
						}
					},
					async inituserinfo(){
						var that = this;
						that.usermessage=(await this.$api.reqGet({
							url:"user/sel",
							methods:"GET"
						})).data;
					},
					async initlecture(){
						var that = this;
						console.log(core.userinfo.uid)
						var a=(await this.$api.reqGet({
							url:"lecturerapply/sel/"+core.userinfo.uid,
							methods:"GET"
						})).data;
						console.log(that.lecturer)
						if(a!=null){
						that.step=a.audit;
						
						that.lecturer=a;
						console.log(that.lecturer);
						}
					},
					async initupd(){
						var that = this;
						that.applyform=(await this.$api.reqPost({
							url:"lecturerapply/update/"+core.userinfo.uid,
							data:that.applyform
						})).data;
						console.log(that.applyform);
					}
		}
	}
</script>

<style>
	.text-time{color: #fbbd08;}
	.text-time .num{background: none; border:none;}
	.text-time .num::after{content: "\e65f" !important; font-size: 40upx;}
	.text-time.refused{color: #e54d42;}
	.text-time.refused .num::after{content: "\e646" !important;}
	.avatar{border-radius: 50%; padding: 8upx; background: #fff; width: 5.33rem; height: 5.33rem; margin: 0 auto; position: relative;}
	.avatar.shadow{box-shadow: 0px 24upx 92upx 0px #E4DCBC;}
	.avatar .cu-avatar{width: 100%; height: 100%;}
	.avatar .icon{position: absolute; right: 0; top: 0; font-size: 48upx;}
	.waitting{height: 485upx; width: 500upx; margin: 0 auto;}
	.waitting.refused{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
	.completed{margin: 0 auto;}
	.cu-form-group .title {min-width: calc(4em + 15px); text-align-last:justify;}
</style>
